<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0 , user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>F6 SUPERSHOT官网</title>
  <link rel="stylesheet" href="./static/css/reset.css">
  <link rel="stylesheet" href="./static/css/public.css">
  <link rel="stylesheet" href="./static/css/about.css">
</head>
<body>
  <header class="clearfix">
    <h1 class="logo fl"><a href="./home.html"><img src="./static/img/f6_logo.png" alt=""></a></h1>
    <div class="swiper-btn-box fl flex">
      <div class="f6-btn1 flex"><img src="./static/img/f6-btn1.png" alt=""></div>
      <div class="f6-btn2 flex"><img src="./static/img/f6-btn2.png" alt=""></div>
      <div class="f6-btn3 flex"><img src="./static/img/f6-btn3.png" alt=""></div>
      <div class="f6-btn4 flex"><img src="./static/img/f6-btn4.png" alt=""></div>
    </div>
  </header>
  <section class="main">
    <div class="about-warp">
      <div><img src="./static/img/about_content_01.jpg" alt=""></div>
      <div><img src="./static/img/about_content_02.jpg" alt=""></div>
      <div><img src="./static/img/about_content_03.jpg" alt=""></div>
      <div><img src="./static/img/about_content_04.jpg" alt=""></div>
      <div><img src="./static/img/about_content_05.jpg" alt=""></div>
      <div><img src="./static/img/about_content_06.jpg" alt=""></div>
      <div><img src="./static/img/about_content_07.jpg" alt=""></div>
      <div><img src="./static/img/about_content_08.jpg" alt=""></div>
      <div><img src="./static/img/about_content_09.jpg" alt=""></div>
      <div><img src="./static/img/about_content_10.jpg" alt=""></div>
      <div><img src="./static/img/about_content_11.jpg" alt=""></div>
      <div><img src="./static/img/about_content_12.jpg" alt=""></div>
      <div><img src="./static/img/about_content_13.jpg" alt=""></div>
      <div ><img src="./static/img/about_content_14.jpg" alt=""></div>
      <div><img src="./static/img/about_content_15.jpg" alt=""></div>
      <div class="paper"><img src="./static/img/about_content_16.jpg" alt=""><span class="code-btn"></span></div>
      <div class="music"><img src="./static/img/about_content_17.jpg" alt=""><span class="code-btn"></span></div>
      <div><img src="./static/img/about_content_18.jpg" alt=""></div>
      <div class="lab"><img src="./static/img/about_content_19.jpg" alt=""><span class="code-btn"></span></div>
      <div><img src="./static/img/about_content_20.jpg" alt=""></div>
    </div>
    <div class="paper-code-mask hide">
      <div class="paper-code-content">
          <div class="paper-code"><img src="./static/img/paper_code.png" alt=""></div>
        <div class="paper-code-close"></div>
      </div>
    </div>
    <div class="music-code-mask hide">
      <div class="music-code-content">
        <div class="music-code"><img src="./static/img/music_code.png" alt=""></div>
        <div class="music-code-close"></div>
      </div>
    </div>
    <div class="lab-code-mask hide">
      <div class="lab-code-content">
        <div class="lab-code"><img src="./static/img/lab_code.png" alt=""></div>
        <div class="lab-code-close"></div>
      </div>
    </div>
  </section>
  <footer>
    <nav>
      <ul class="footer-nav flex justify-center">
        <li class="footer-nav-about">
          <a href="./about.html"></a>
        </li>
        <li class="footer-nav-call">
          <a href="./call.html"></a>
        </li>
        <li class="footer-nav-buy">
          <a href="./buy.html"></a>
        </li>
      </ul>
    </nav>
  </footer>
  <div class="opener"></div>
  <div class="opener1"></div>
  <script src="./static/js/zepto.min.js"></script>
  <script src="./static/js/touch.js"></script>
  <script src="./static/js/fx.js"></script>
  <script src="./static/js/zepto.cookie.min.js"></script>
  <script src="./static/js/about.js"></script>
  <script>
    $('.logo').on('tap',function(){
      window.location.href = './index.html';
    })
    $('.swiper-btn-box').children().on('tap',function(){
      var num = $(this).index();
      $.fn.cookie('index', num);//COOKIE只能在真机上起作用
      window.location.href = './details.html';
    })
    var systemInfo = navigator.userAgent;
    if (systemInfo.indexOf('Android') > -1 || systemInfo.indexOf('Linux') > -1) {//安卓手机
      $('.about-warp div').css('margin-top','-1px');
    }
    var timerN = setInterval(function(){
      $('.opener').animate({
        bottom: '1.14rem'
      },500,function(){
        $('.opener').animate({
          bottom: '1.04rem'
        },500)
      })
    },1200)
    var timerH = setInterval(function(){
      $('.opener1').animate({
        bottom: '1.36rem'
      },500,function(){
        $('.opener1').animate({
          bottom: '1.26rem'
        },500)
      })
    },1200)
  </script>
</body>
</html>